import React from 'react';
import {Link} from 'react-router-dom';

class Topchild extends React.Component{
    constructor(props){
        super(props);
        this.state={
            cl:'',
        }
    }
    render(){
        return(
            <li>
                <div className="songlist__item">
                    <div className="songlist__number  songlist__number--top" id={this.props.id>3?'ntm':''}>{this.props.ranking}</div>	
                    <div className="songlist__rank" >
                        <i className="icon_rank_popular"></i>{this.props.percent}
                    </div>
                    <div className="songlist__songname">
                        <i className="songlist__icon songlist__icon_exclusive"></i>
                        <a href="##" className="songlist__icon songlist__icon_mv">
                            <span className="icon_txt">MV</span>
                        </a>
                        <span className="songlist__songname_txt">
                            <a href="##" className="songlist__cover album_name">
                                <img src={this.props.url} className="songlist__pic" alt=""/>
                            </a>
                            <Link to="/songdetail" className="js_song jb">
                                {this.props.songName}
                                <span className="songlist__song_txt"></span>
                            </Link>
                        </span>
                        <div className="mod_list_menu">
                            <a href="javascript:;" className="list_menu__item list_menu__play js_play">
                                <i className="list_menu__icon_play"></i>
                                <span className="icon_txt">播放</span>
                            </a>
                            <a href="javascript:;" className="list_menu__item list_menu__add js_fav">
                                <i className="list_menu__icon_add"></i>
                                <span className="icon_txt">添加歌单</span>
                            </a>
                            <a href="javascript:;" className="list_menu__item list_menu__down js_down">
                                <i className="list_menu__icon_down"></i>
                                <span className="icon_txt">下载</span>
                            </a>
                            <a href="javascript:;" className="list_menu__item list_menu__share js_share">
                                <i className="list_menu__icon_share"></i>
                                <span className="icon_txt">分享</span>
                            </a>
                        </div>
                    </div>
                    <div className="songlist__artist">
                        <a href="##" className="singer_name tm">{this.props.name}</a>
                    </div>
                    <div className="songlist__time">{this.props.time}</div>
                    <div className="songlist__other"></div>
                </div>
            </li>
        )
    }
}
export default Topchild;